<template>
<!-- 介绍 -->
  <div id="introduce">
    <div class="introduce_title">
      {{directionObj.title}}
    </div>
    <div class="introduce_info">
      <h4>岗位概述</h4>
      <p>{{directionObj.info}}</p>
      <h4>主要职责</h4>
      <p>{{directionObj.duty}}</p>
    </div>
  </div>
</template>

<script>
export default {
  name: "Introduce",
  props:{
    directionObj:Object
  }
}
</script>

<style scoped>
#introduce{
  position: relative;
  width: 90%;
  max-width: 400px;
  height: 220px;
  margin: 20px auto;
  border-radius: 20px;
  border: 2px solid #cccccc;

}
.introduce_title{
  font-size: 20px;
  text-align: center;
  font-weight: bolder;
  margin-top: 10px;
}
.introduce_info{
  padding: 12px;
}
.introduce_info h4{
  margin: 5px;
}
.introduce_info p{
/* 让p超过3行后省略号显示 */
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}
</style>